<template>
	<view class="mainbgc" @click="hidefalse">
		<header-top :messageInfo="{typeFlag:true,message:'供应商结算',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft">
					<!-- <view class="nostrongtext margin_right" @click.stop="submit">提交</view> -->
					<view class="diandiandian" @click.stop="dian">
						<view class="selectcontent " v-show="selectshow">
							<view class="topbox">
								<view class="flexleft itemselect" @click.stop="qingkong">
									<view class="leftimage margin_right">
										<image src="../../../static/image/system/shanchu.png" mode=""></image>
									</view>
									<view>清空单据</view>
								</view>
							</view>
							<view class="sanjiao"></view>
						</view>
					</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding_top ffffff">
			<view class="inputbox">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">供应商</view>
					<!-- <view class="bitian">*</view> -->
				</view>
				<view class="itembox flexbetween" @click="selectRole('/pages/workbench/jiben/gongyingsda?type=1')">
					<input type="text" placeholder="点击选择供应商" disabled="true" v-model="dataAll.supplier_name">
					<view class="righticon2"></view>
				</view>
			</view>
			<view class="flexbetween margin_top" v-show="dataAll.supplier_name">
				<view class="flexleft xiaohui">
					<view class="margin_right">余额：
						<text class="xiaolv">{{dataAll.yfk_money}}</text>
					</view>
					<view>欠：
						<text style="color: #ff0000;">{{dataAll.qk_money}}</text>
					</view>
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">支付金额</view>
				</view>
				<view class="itembox">
					<input type="number" placeholder="请输入金额" v-model="dataAll.pay_price">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">备注</view>
				</view>
				<view class="itembox">
					<input type="text" placeholder="请输入备注内容" v-model="dataAll.notes">
				</view>
			</view>
			<view class="inputbox margin_top">
				<view class="flexleft flex1">
					<view class="strongtext margin_right shangbianju">支付方式</view>
				</view>
				<view class="itembox flexleft">
					<view class="flexleft margin_right1" @click="dataAll.pay_type=10">
						<u-icon name="checkmark-circle-fill" :color="dataAll.pay_type==10?'#0BBDCB':'#999'" size="20"></u-icon>
						<view class="strongtext">微信</view>
					</view>
					<view class="flexleft margin_right1" @click="dataAll.pay_type=20">
						<u-icon name="checkmark-circle-fill" :color="dataAll.pay_type==20?'#0BBDCB':'#999'" size="20"></u-icon>
						<view class="strongtext">支付宝</view>
					</view>
					<view class="flexleft margin_right1" @click="dataAll.pay_type=40">
						<u-icon name="checkmark-circle-fill" :color="dataAll.pay_type==40?'#0BBDCB':'#999'" size="20"></u-icon>
						<view class="strongtext">余额</view>
					</view>
					<view class="flexleft" @click="dataAll.pay_type=30">
						<u-icon name="checkmark-circle-fill" :color="dataAll.pay_type==30?'#0BBDCB':'#999'" size="20"></u-icon>
						<view class="strongtext">银行卡</view>
					</view>
				</view>
				<!-- <view class="itembox">
					<u-radio-group v-model="dataAll.pay_type" placement="row" circle>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '20rpx'}" label="微信"
							name="10"></u-radio>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '20rpx'}" label="支付宝"
							name="20"></u-radio>
						<u-radio activeColor="#0BBDCB" :customStyle="{marginRight: '20rpx'}" label="余额"
							name="40"></u-radio>
						<u-radio activeColor="#0BBDCB" label="银行卡" name="30"></u-radio>
					</u-radio-group>
				</view> -->
			</view>
		</view>
		<view class="mainpadding">
			<view class="surebtns" @click="submit">提交</view>
		</view>
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
		<template v-if="shareshow">
			<u-popup :show="shareshow" mode="center" :closeOnClickOverlay="false" closeable @close="guanbi" round="10">
				<view class="mainpadding_top">
					<view class="titletext margin_top">订单编号：{{pay_data.order_no}}</view>
					<view class="flexcenter" style="margin-top: 30rpx;">
						<uqrcode ref="uqrcode" canvas-id="qrcode" v-bind:value="pay_data.expend.qrcode_url"
							:options="{ margin: 10}">
						</uqrcode>
					</view>
					<view class="margin_top">姓名：{{dataAll.supplier_name}}</view>
					<view class="flexbetween margin_top">
						<view class="savebtn" @click="saveimg">保存图片</view>
						<view class="savebtn" style="background-color: #00B855;" @click="shareimg">分享好友</view>
					</view>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				dataAll: {
					supplier_id: "", //供应商ID
					supplier_name: "", //供应商名称
					use_yfk_price: "", //使用余额
					qk_money: "",
					pay_type: "10",
					pay_price: "",
					notes: "",

				},
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				selectshow: false,
				wfxzflag: true,
				setIntervalPay: null,
				pay_data: {
					expend:{
						qrcode_url:""
					}
				},
				shareshow: false,
			}
		},
		onShow() {
			uni.$off("gysSelectFn")
			uni.$on("gysSelectFn", data => {
				this.wfxzflag = false
				this.dataAll.supplier_id = data.id
				this.dataAll.supplier_name = data.name
				this.dataAll.yfk_money = data.yfk_money
				this.dataAll.qk_money = data.qk_money
				return false
			})
			if (this.wfxzflag && uni.getStorageSync("gongyingshangjsInfo")) {
				this.dataAll = JSON.parse(uni.getStorageSync("gongyingshangjsInfo"))
			} else {
				this.wfxzflag = true
			}
		},
		watch: {
			dataAll: {
				deep: true,
				handler(newval) {
					this.refreshmsg()
				}
			}
		},
		onUnload() {
			clearInterval(this.setIntervalPay)
		},
		methods: {
			shareimg(){
				this.$refs.uqrcode.toTempFilePath({
				  success: res => {
					  this.uploadImageServicefx(res.tempFilePath)
				  }
				});
			},
			uploadImageServicefx(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					this.zfshare(_this.pay_data.order_no,res.fullurl)
				}).catch(err => {});
			},
			submit() {
				if (this.dataAll.supplier_id == "") {
					httpRequest.toast("请选择供货商")
					return false
				}
				if (this.dataAll.pay_price == "") {
					httpRequest.toast("请输入支付金额")
					return false
				}
				if (this.dataAll.pay_type == 10) { //微信支付
					this.scanbarCode()
					return false
				}
				httpRequest.request('/dhtapi/Supplieryskorder/addSupplierYskOrder', 'POST', {
					supplier_id: this.dataAll.supplier_id,
					pay_type: this.dataAll.pay_type,
					pay_price: this.dataAll.pay_price,
					notes: this.dataAll.notes,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						if (this.dataAll.pay_type == 20) { //支付宝支付、
							this.pay_data = res.data
							this.shareshow = true
							this.setIntervalPay = setInterval(() => {
								this.getpaytype(res.data.query_url) //获取支付宝的支付状态，是否支付完成
							}, 1000)
						} else if (this.dataAll.pay_type == 40) { //余额支付成功
							uni.setStorageSync('gongyingshangjsInfo', "")
							httpRequest.toast(res.msg)
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						}else if(this.dataAll.pay_type==30){//银行卡支付
							httpRequest.toast(res.msg)
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						}
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			guanbi(){
				clearInterval(this.setIntervalPay)
				// this.shareshow = false
				uni.navigateBack(1)
			},
			scanbarCode() {
				let that = this
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						that.chuangjiandd(res.result)
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});
			},
			chuangjiandd(val) {
				httpRequest.request('/dhtapi/Supplieryskorder/addSupplierYskOrder', 'POST', {
					supplier_id: this.dataAll.supplier_id,
					pay_type: this.dataAll.pay_type,
					pay_price: this.dataAll.pay_price,
					notes: this.dataAll.notes,
					auth_code: val
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.setIntervalPay = setInterval(() => {
							this.getpaytype(res.data.query_url) //获取微信用户的支付状态，是否支付完成
						}, 1000)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getpaytype(url) {
				uni.request({
					url: url,
					data: {},
					method: "GET", //'GET','POST'
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log(res, "获取支付信息获取支付信息");
						if (res.data.status == "succeeded") { //支付成功
							httpRequest.toast("客户支付成功")
							uni.setStorageSync('gongyingshangjsInfo', "")
							clearInterval(this.setIntervalPay)
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						}
					},
					fail: (res) => {}
				})
			},
			// 数据刷新
			refreshmsg() {
				let _this = this
				uni.setStorageSync('gongyingshangjsInfo', JSON.stringify(this.dataAll))
			},
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			qingkong() {
				this.selectshow = false
				this.modal.modalShow = true
				this.modal.title = "确认清空单据？"
			},
			dian() {
				this.selectshow = this.selectshow == false ? true : false
			},
			hidefalse() {
				if (this.selectshow == true) {
					this.selectshow = false
					return
				}
			},
			modalSure() {
				this.modal.modalShow = false
				if (this.modal.title == "确认清空单据？") {
					uni.setStorageSync('gongyingshangjsInfo', "")
					httpRequest.toast("清除成功")
					setTimeout(function() {
						uni.navigateBack(1)
					}, 500)
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	//
	.flex1 {
		flex: 2;
	}

	.inputbox {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.itembox {
		flex: 7;
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.lanseyoujt {
		background-image: url('@/static/image/system/lanseyoutubiao.png');
		width: 12rpx;
		height: 22rpx;
		margin: 0 30rpx 0 10rpx;
		background-size: 100% 100%;
	}

	.lansetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.shangbianju {
		margin-top: 10rpx;
	}
</style>
<style lang="scss" scoped>
	// 定位点点点
	.diandiandian {
		position: relative;
	}

	.topbox {
		border-bottom: 2rpx solid rgba(255, 255, 255, .1);
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 200rpx;
		mix-width: 200rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}

	.selectcontent {
		position: absolute;
		top: 50rpx;
		right: -6rpx;
		min-width: 250rpx;
		mix-width: 250rpx;
		text-align: center;
		background-color: rgba(11, 189, 203, 0.8);
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		word-wrap: break-word;
	}

	.sanjiao {
		position: absolute;
		top: -12rpx;
		right: 8rpx;
		background-image: url("@/static/image/system/sanjiao2.png");
		width: 40rpx;
		height: 12rpx;
		background-size: 100% 100%;
	}

	.leftimage {
		width: 34rpx;
		height: 34rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.itemselect {
		padding: 20rpx 30rpx;
	}
</style>